<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选-综合网购商城，正品低价、品质保障、快速送达、安心服务！</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: #5e5e5e;
            text-decoration: none;
            cursor: pointer;
        }

        li {
            list-style: none;
        }

        .wbox {
            width: 100%;
            height: 120px;
            background-color: rgb(239, 242, 246);
        }

        .top {
            width: 990px;
            position: relative;
            height: 120px;
            vertical-align: middle;
            margin: 0 auto;
            background-color: rgb(239, 242, 246);
        }

        .logo {
            margin: 18px 40px 0 0;
            float: left;
        }

        .logo>a {
            display: inline-block;
            width: 212px;
            height: 60px;
            overflow: hidden;
            background-position: 0 -298px;
            margin-left: 50px;
        }

        .top .wzwza {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #888;
            cursor: pointer;
        }

        .safaTip {
            width: 100%;
            height: 100%;
            background-color: #faedd9;
            border-top: 1px solid #f9e0b4;
        }

        .safaTip>p {
            width: 828px;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            margin: 0 auto;
            font-size: 12px;
            background-color: #faedd9;
            color: #ff7f23;
        }

        .safaTip>p>a {
            color: #2875cc;
        }

        .content_bg {
            width: 100%;
            height: 600px;
            /* background: #fff240; */
            background-color: #f0f3ef;
        }

        .dl_wrap {
            width: 350px;
            float: right;
            margin-top: 85px;
            margin-right: 43%;
            position: relative;
            background-color: #fff;
        }

        .dl_wrap .logoHead {
            position: relative;
            height: 54px;
            overflow: hidden;
            border-bottom: 1px solid #e4e2e2;

        }

        .dl_wrap .logoHead .left {
            position: absolute;
            border-bottom: 1px solid #f4f4f4;
            text-align: center;
            color: #5e5e5e;
            left: 0;
            width: 174px;
            height: 54px;
        }

        .dl_wrap .logoHead .left>a {
            border-right: 1px solid #d4d4d4;
            height: 18px;
            position: absolute;
            left: 0;
            width: 99%;
            top: 16px;
            font-size: 18px;

        }

        .dl_wrap .logoHead .right {
            right: 0;
            width: 175px;
            height: 54px;
            position: absolute;
            border-bottom: 1px solid #f4f4f4;
            text-align: center;
            color: #5e5e5e;
        }

        .dl_wrap .logoHead .right>a {
            height: 18px;
            position: absolute;
            left: 0;
            width: 99%;
            top: 16px;
            font-size: 18px;
        }

        .dl_wrap .logoHead a.active {
            color: #cc9756;
        }

        /* 中间二维码 */
        .logoCert {
            width: 350px;
            box-sizing: border-box;
            position: relative;
        }

        .logoCert .second {
            min-height: 241px;
            padding: 25px 11px 0 19px;
            color: #888;
            position: relative;
            background-color: #fff;
            display: none;
        }

        .logoCert .second .register {
            width: 320px;
            color: #888;
            padding: 0 0 24px;
            position: relative;
        }

        .logoCert .second input {
            position: relative;
            padding: 8px 10px 7px;
            width: 268px;
            height: 25px;
            border: 1px solid #ccc;
            outline: none;
            color: #333;
            font-size: 14px;
            line-height: 21px;
            z-index: 2;
            margin-left: 6px;

        }

        .logoCert .second .sjhm,
        .second .mima,
        .second .remima {
            margin-bottom: 14px;
        }

        .second .remeber .fl {
            float: left;
            color: #5e5e5e;
            font-size: 12px;
        }

        .second .remeber .fl>input {
            float: left;
            margin-right: 4px;
            margin-top: 15px;
        }

        .second .remeber .frig {
            font-size: 12px;
            float: right;
        }

        .second .remeber>button {
            display: block;
            width: 290px;
            height: 42px;
            background-color: #cc9756;
            font: 500 18px/41px "Micrisoft";
            color: #fff;
            text-align: center;
            border: 0 none;
            outline: none;
        }

        .second .remeber>p {
            padding: 0 0 15px;
        }

        .second .remeber>p>a {
            color: #2875cc;
            font-size: 12px;
        }


        /* 二维码下方登录方式 */
        .dl_wrap .logoBttom {
            overflow: hidden;
            clear: both;
            background-color: #fcfcfc;
            padding: 9px 20px;
            color: #a5a5a5;
            border: 1px solid #efecec;
            position: relative;
        }

        .dl_wrap .logoBttom a {
            float: left;
            cursor: pointer;
            color: #5e5e5e;
            padding: 0 8px;
            margin: 6px 0;
            font-size: 12px;
            border-right: 1px solid #efecec;
        }

        .dl_wrap .logoBttom i {
            position: absolute;
            top: 14px;
            right: 20px;
            width: 19px;
            height: 19px;
            background: url(./img/login-bg-common.png) 0 0 no-repeat;
        }

        /*下方很多很多文字区域*/
        .gome_footm {
            margin-top: 15px;
            width: 100%;
        }

        .gome_footm .foot_box {
            width: 990px;
            background-color: rgb(239, 242, 246);
            position: relative;
            margin: 0 auto;
            padding: 20px 0 0;

        }

        .gome_footm .foot_box>ul {
            width: 990px;
            height: 22px;
            line-height: 22px;
            margin: 0 auto;
        }

        .gome_footm .foot_box>ul li {
            float: left;
            font-size: 12px;
            padding: 0 13px 0 0;
            color: #ccc;
        }

        .gome_footm .foot_box>ul li>a {
            color: #666;
            font-size: 12px;
        }

        .gome_footm .foot_box>p {
            color: #999;
            font-size: 12px;
            height: 22px;
            line-height: 22px;
        }

        .gome_footm .foot_box>p a {
            color: #999;
        }

        .gome_footm .foot_box .icon_wrap {
            position: relative;
            padding-left: 23px;
        }

        .gome_footm .foot_box .icon_wrap>i {
            position: absolute;
            left: 0;
            top: -3px;
            width: 18px;
            height: 20px;
            background-color: url(./img/ui.png) 0 -1712px;
        }

        .gome_footm .foot_box .fot_botm {
            border-top: 1px solid #dcdbdb;
            margin-top: 5px;
            padding: 14px 0 25px;
            overflow: hidden;
        }

        .gome_footm .foot_box .fot_botm a {
            color: #666;
        }

        .gome_footm .foot_box .fot_botm b {
            font-weight: normal;
            width: 50px;
            font-size: 12px;
            display: block;
            float: left;
            color: #999;
            padding: 0 20px 0 5px;
        }

        .gome_footm .foot_box .fot_botm i {
            display: block;
            width: 35px;
            height: 35px;
            background: url(./img/ui.png) 0 -180px;
            float: left;
        }

        .gome_footm .foot_box .fot_jyx>b {
            width: 60px;
        }

        .gome_footm .foot_box .fot_jyx>i {
            background-position: 0 -180px;
        }

        .gome_footm .foot_box .fot_kxw>i {
            background-position: -35px -180px;
        }

        .gome_footm .foot_box .fot_cxw>i {
            background-position: -70px -180px;
        }

        .gome_footm .foot_box .fot_cxw>b {
            padding-top: 9px;
        }

        .gome_footm .foot_box .fot_cyw>i {
            background-position: -105px -180px;
        }

        .gome_footm .foot_box .fot_wgd>i {
            background-position: -140px -180px;
        }

        .gome_footm .foot_box .fot_wgd>b {
            padding-top: 9px;
            width: 60px;
        }

        .gome_footm .foot_box .fot_shs>i {
            background-position: -175px -180px;
        }

        .gome_footm .foot_box .fot_shs>b {
            width: 110px;
        }

        .gome_footm .foot_box .fot_wsy>i {
            background-position: -238px -180px;
        }

        .gome_footm .foot_box .fot_wsy>b {
            width: 80px;
        }

        /*第二面*/
        .first {
            min-height: 241px;
            padding: 25px 11px 0 19px;
        }

        .first .normalLO {
            width: 320px;
            color: #888;
            padding: 0 0 24px;
            position: relative;
        }

        .first .normalLO>div>input {
            position: relative;
            padding: 8px 10px 7px;
            width: 268px;
            height: 25px;
            border: 1px solid #ccc;
            outline: none;
            color: #333;
            font-size: 14px;
            line-height: 21px;
            z-index: 2;
            margin-left: 6px;
        }

        .first .normalLO .sjhm>input {
            margin-bottom: 14px;
        }

        .first .normalLO .remeber {
            width: 300px;
            height: 40px;
            line-height: 40px;
            padding: 10px 0 12px;
        }

        .first .remeber .fl {
            float: left;
            color: #5e5e5e;
            font-size: 12px;
        }

        .first .remeber .fl>input {
            float: left;
            margin-right: 4px;
            margin-top: 15px;
        }

        .first .remeber .frig {
            font-size: 12px;
            float: right;
        }

        .first .remeber>button {
            display: block;
            width: 290px;
            height: 42px;
            background-color: #cc9756;
            font: 500 18px/41px "Micrisoft";
            color: #fff;
            text-align: center;
            border: 0 none;
            outline: none;
        }

        .first .remeber>p {
            padding: 0 0 15px;
        }

        .first .remeber>p>a {
            color: #2875cc;
            font-size: 12px;
        }
    </style>
</head>

<body style="background-color: rgb(239,242,246);">
    <div class="wbox">
        <div class="top">
            <div class="logo">
                <a href="javascript:;" class="yx-cp-icon wy_log">

                </a>
            </div>
            <!-- <a href="" class="wzwza">网站无障碍</a> -->
        </div>
    </div>
    <div class="safaTip">
        <p>
            <em></em>
            依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版
            <a href="https://login.gome.com.cn/authAgreeMentPrivacy" target="_blank">《网易严选平台隐私政策》</a>
            已上线，将更有利于保护您的个人隐私。
        </p>
    </div>
    <!-- 中间区域 -->
    <div class="content_bg">
        <div class="cont_bg">
            <!-- 登陆区域 -->
            <div class="dl_wrap">
                <div class="logoHead">
                    <div class="left">
                        <a href="javascript:;" class="active">登陆</a>
                    </div>
                    <div class="right">
                        <a href="###">注册</a>
                    </div>
                </div>
                <div class="logoCert">
                    <!--第一面-->
                    <div class="first">
                        <div class="normalLO">
                            <div class="sjhm">
                                <input type="text" placeholder="手机号码/用户名/邮箱/门店会员卡号" class="tel">
                            </div>
                            <div class="mima">
                                <input type="password" placeholder="密码" class="password">
                            </div>
                            <div class="remeber">
                                <div class="fl">
                                    <input type="checkbox" id="autoLogflag">
                                    <label for="autoLogflag">自动登录</label>
                                </div>
                                <div class="frig" style="width:120px">
                                    <a href="###">忘记密码</a>
                                    <span>|</span>
                                    <a href="###">免费注册</a>
                                </div>
                                <button class="login-btn">登 录</button>
                                <p>
                                    <a href="javascript:;" class="fontBlink phoneLoginBtn">手机号快速登录(支持门店预留手机)</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 第二面  注册 -->
                    <div class="second">
                        <div class="register">
                            <div class="mima">
                                <input type="username" placeholder="用户名" class="reg-username">
                            </div>
                            <div class="sjhm">
                                <input type="text" placeholder="手机号码/用户名/邮箱/门店会员卡号" class="reg-tel">
                            </div>
                            <div class="mima">
                                <input type="password" placeholder="密码" class="reg-password">
                            </div>
                            <div class="remima">
                                <input type="password" placeholder="确认密码" class="reg-ypassword">
                            </div>
                            <div class="remeber">
                                <!--  -->
                                <!-- <div class="fl">
                                    <input type="checkbox" id="autoLogflag">
                                    <label for="autoLogflag">自动登录</label>
                                </div> -->
                                <!-- <div class="frig" style="width:120px">
                                    <a href="###">忘记密码</a>
                                    <span>|</span>
                                    <a href="###">免费注册</a>
                                </div> -->
                                <button class="reg-btn">注册</button>
                                <!-- <p>
                                    <a href="javascript:;" class="fontBlink phoneLoginBtn">手机号快速登录(支持门店预留手机)</a>
                                </p> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="logoBttom">
                    <a href="###">门店会员卡登录</a>
                    <a href="###">QQ</a>
                    <a href="###">微信</a>
                    <a href="###">微博</a>
                    <a href="###">美付宝</a>
                    <i></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 下方很多文字区域 -->
    <div class="gome_footm">
        <div class="foot_box">
            <ul>
                <li>
                    <a href="###">网易严选控股集团</a>
                </li>
                <li>
                    <a href="###">网易严选管家</a>
                </li>
                <li>
                    <a href="###">美锅优食</a>
                </li>
                <li>
                    <a href="###">关于网易严选</a>
                </li>
                <li>
                    <a href="###">加入我们</a>
                </li>
                <li>|</li>
                <li>
                    <a href="###">品牌大全</a>
                </li>
                <li>
                    <a href="###">商品专题</a>
                </li>
                <li>
                    <a href="###">商品词</a>
                </li>
                <li>
                    <a href="###">热词搜索</a>
                </li>
                <li>
                    <a href="###">友情链接</a>
                </li>
                <li>
                    <a href="###">风险监测</a>
                </li>
                <li>|</li>
                <li>
                    <a href="###">商家入驻</a>
                </li>
                <li>
                    <a href="###">美国分销</a>
                </li>
                <li>
                    <a href="###">知识产权</a>
                </li>
            </ul>
            <p>
                本公司游戏产品适合18岁以上成年人使用&nbsp;&nbsp;违法和不良信息举报电话：010-59288033&nbsp;&nbsp;
                <a class="interDrug" href="//gfs7.gomein.net.cn/wireless/T1mREOBv_v1RCvBVdK_774_1134.jpg"
                    target="_blank">互联网药品信息服务资格证编号（沪）-经营性-2019-0006/(京）-经营性-2018-0025</a>
            </p>
            <p>
                网络食品销售第三方平台提供者备案：沪网食备A0015号&nbsp;&nbsp;
                <a class="interDrug" href="//gfs8.gomein.net.cn/wireless/T1GF_kBCVT1RCvBVdK_2173_3072.jpg"
                    target="_blank">网络文化经营许可证沪网文[2021] 0385-031 号</a>
            </p>
            <p>
                客服电话:4008113333&nbsp;&nbsp;
                <a class="interDrug" href="https://beian.miit.gov.cn" target="_blank">沪ICP备11009419号-1/京ICP备
                    19011786号</a>
                &nbsp;&nbsp;
                <a class="interDrug" href="//gfs8.gomein.net.cn/wireless/T1FGJIByYv1RCvBVdK_422_591.jpg"
                    target="_blank">京B2-20191290</a>
                &nbsp;&nbsp;
                <a class="interDrug" href="//www.gome.com.cn/companyinfo/" target="_blank">经营执照</a>
                &nbsp;&nbsp;
                <a class="interDrug" href="//gfs5.gomein.net.cn/wireless/T1TACIBmbv1RCvBVdK_1412_1956.jpg"
                    target="_blank">营业执照</a>
                &nbsp;&nbsp;
                <a class="interDrug" href="//gfs8.gomein.net.cn/wireless/T1w7DhBjAT1RCvBVdK_1211_2641.jpg"
                    target="_blank">出版物经营许可证</a>
            </p>
            <p>
                ©2000-2023&nbsp;&nbsp;网易严选真快乐电子商务有限公司版权所有&nbsp;&nbsp;
                <a class="icon_wrap" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502038379"
                    target="_blank">
                    <i class="tw-w-mark-icon"></i>
                    京公网安备 11010502038379号
                </a>
            </p>
            <div class="fot_botm">
                <a href="###" class="fot_jyx">
                    <i></i>
                    <b>经营性网站备案信息</b>
                </a>
                <a href="###" class="fot_kxw">
                    <i></i>
                    <b>可信网站信用评价</b>
                </a>
                <a href="###" class="fot_cxw">
                    <i></i>
                    <b>诚信网站</b>
                </a>
                <a href="###" class="fot_cyw">
                    <i></i>
                    <b>朝阳网络警察</b>
                </a>
                <a href="###" class="fot_wgd">
                    <i></i>
                    <b>网购大家评</b>
                </a>
                <a href="###" class="fot_shs">
                    <i></i>
                    <b>上海市互联网违法和不良信息举报中心</b>
                </a>
                <a href="###" class="fot_wsy">
                    <i></i>
                    <b>网上有害信息举报专区</b>
                </a>
                <a href="###" class="fot_pic">
                    <img src="https://gfs6.gomein.net.cn/wireless/T1i2CcBvVv1RCvBVdK_293_143.png" style="width:72px;">
                </a>
            </div>
        </div>
    </div>
</body>
<script src="./jquery-3.5.1.js"></script>
<script src="./jquery.cookie.js"></script>
<script>
    $(function () {
        //登录页面的二级菜单
        $(".left").on("click", function () {
            $(".left>a").addClass("active")
            $(".right>a").removeClass("active")
            $(".first").css("display", "block")
            $(".second").css("display", "none")
        })
        $(".right").on("click", function () {
            $(".right>a").addClass("active")
            $(".left>a").removeClass("active")
            $(".first").css("display", "none")
            $(".second").css("display", "block")
        })
        // 登录
        $('.login-btn').on('click', function () {
            var tel = $(".tel").val().trim()//去空格
            var password = $.trim($(".password").val())
            $.ajax({
                url: 'http://127.0.0.1:8090/login',
                type: 'post',
                data: {
                    tel,
                    password
                },
                success: res => {
                    console.log(res)
                    if (res.msg == '登录成功') {
                        setTimeout(() => {
                            location.assign('./newsIndex.html')
                        }, 1000)
                    } else {
                        alert(res.msg)
                    }
                }
            })
        })
        // 注册
        $('.reg-btn').on('click', function () {
            var username = $('.reg-username').val().trim()
            var password = $('.reg-password').val().trim()
            var tel = $('.reg-tel').val().trim()
            var ypassword = $('.reg-ypassword').val().trim()
            $.ajax({
                url: 'http://127.0.0.1:8090/register',
                type: 'post',
                data: {
                    username,
                    tel,
                    password,
                    ypassword
                },
                success: res => {
                    console.log(res)
                    if (res.msg == '注册成功') {
                        setTimeout(() => {
                            $('.left').click()
                        }, 1000)
                    } else {
                        alert(res.msg)
                    }
                }
            })
        })
        //先从cookie中 获取，查看有没有存过此用户名
        // var username = $.cookie("username")
        // if (username) {
        //     $("input:text").val(username);
        // }
        // $(".remeber>button").click(function () {
        //     //先获取用户名
        //     var user = $("input:text").val().trim()//去空格
        //     var psw = $.trim($("input:password").val())
        //     if (user == "" || psw == "") {
        //         $(this).css('background', "#d34a4a97")
        //         alert("用户或密码不能为空")
        //     } else {
        //         $(this).css('background', "#cc9756")
        //         alert("登陆成功")
        //         //把用户名存在cookie中（7天免登录，7天后失效）
        //         $.cookie("username", user, {
        //             expires: 365
        //         })
        //     }
        // })





    })
</script>

</html>